<template>
  <div class="content">
    <div class="navs">
        <span>
            首页>
        </span>
        <span>
            工作台
        </span>
    </div>
    <div class="welcome">
        <p>👏</p>
        <p>早上好，</p>
        <p>杨凯！</p>
    </div>

    <StaffTag></StaffTag>

    <div class="second-box">
        <div class="entry">
            <p class="title" style="margin-left: 10px;">快捷入口</p>
            <ul>
                <li v-for="(item,index) in lists" :key="index">
                    <div :style="{background: item.color}">
                        <img :src="item.img" alt="">
                    </div>
                    <p>{{item.title}}</p>
                </li>
            </ul>
        </div>

        <Calendar></Calendar>
        <BrokenLine></BrokenLine>

    </div>
    <div class="third-box">
        <div class="third-1st">
            <div class="titles">
                <p>资产</p>
                <div>
                    <p>全部资产</p>
                    <img src="../assets/img/oa30.svg" alt="">
                </div>
            </div>
            <div class="third-lines">
                <div>
                    <span>9</span>
                    <p>新增资产</p>
                </div>
                <div>
                    <span>3</span>
                    <p>新增采购单</p>
                </div>
                <div>
                    <span>5</span>
                    <p>待入库资产</p>
                </div>
                <div>
                    <span>1</span>
                    <p>新增盘点</p>
                </div>
            </div>
            <div class="third-lines">
                <div>
                    <span>9</span>
                    <p>新增资产领用</p>
                </div>
                <div>
                    <span>3</span>
                    <p>新增资产退库</p>
                </div>
                <div>
                    <span>5</span>
                    <p>新增资产借用</p>
                </div>
                <div>
                    <span>1</span>
                    <p>新增资产归还</p>
                </div>
            </div>
            <div class="third-line">
                <div>
                    <span>9</span>
                    <p>新增资产</p>
                </div>
            </div>
        </div>
        <div class="third-2nd">
            <div class="third-in" >
                <div class="titles bottoms">
                    <p>招聘</p>
                    <div>
                        <p>全部候选人</p>
                        <img src="../assets/img/oa30.svg" alt="">
                    </div>
                </div>
                <div class="third-line" style="padding: 0 20px;">
                    <div>
                        <div class="unit">
                            <span>80</span>
                            <span>人</span>   
                        </div>
                        <p>新增候选人</p>
                    </div>
                    <div>
                        <div class="unit">
                            <span>80</span>
                            <span>人</span>   
                        </div>
                        <p>待初筛</p>
                    </div>
                    <div>
                        <div class="unit">
                            <span>9</span>
                            <span>人</span>   
                        </div>
                        <p>待面试</p>
                    </div>
                </div>
            </div>

            <div class="third-in" style="margin-top: 20px;">
                <div class="titles bottoms">
                    <p>人事</p>
                    <div>
                        <p>全部记录</p>
                        <img src="../assets/img/oa30.svg" alt="">
                    </div>
                </div>
                <div class="third-line" >
                    <div>
                        <div class="unit">
                            <span>80</span>
                            <span>人</span>   
                        </div>
                        <p>待入职</p>
                    </div>
                    <div>
                        <div class="unit">
                            <span>80</span>
                            <span>人</span>   
                        </div>
                        <p>待转正</p>
                    </div>
                    <div>
                        <div class="unit">
                            <span>9</span>
                            <span>人</span>   
                        </div>
                        <p>待离职</p>
                    </div>
                    <div>
                        <div class="unit">
                            <span>19</span>
                            <span>人</span>   
                        </div>
                        <p>签订合同</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="third-3rd">
            <div class="third-in">
                <div class="titles bottoms">
                    <p>绩效考核</p>
                    <div>
                        <p>全部考核计划</p>
                        <img src="../assets/img/oa30.svg" alt="">
                    </div>
                </div>
                <div class="third-line" style="padding: 0 20px;">
                    <div>
                        <div class="unit">
                            <span>80</span>
                            <span>人</span>   
                        </div>
                        <p>未开始考核计划</p>
                    </div>
                    <div>
                        <div class="unit">
                            <span>80</span>
                            <span>人</span>   
                        </div>
                        <p>进行中考核计划</p>
                    </div>
                    <div>
                        <div class="unit">
                            <span>9</span>
                            <span>人</span>   
                        </div>
                        <p>已完成考核计划</p>
                    </div>
                </div>
            </div>
            <div class="third-inner">
                <div class="titles">
                    <p>今日考勤</p>
                    <div>
                        <p>考勤记录</p>
                        <img src="../assets/img/oa30.svg" alt="">
                    </div>
                </div>
                <div class="third-lines" >
                    <div style="margin-left: 60px;">
                        <div class="unit">
                            <span>80</span>
                            <span>人</span>   
                        </div>
                        <p>正常打卡</p>
                    </div>
                    <div style="margin-right: 60px;">
                        <div class="unit">
                            <span>80</span>
                            <span>人</span>   
                        </div>
                        <p>异常打卡</p>
                    </div>
                </div>
                <div class="state">
                    <div>
                        迟到：
                        <p>3</p>
                        人
                    </div>
                    <div>
                        早退：
                        <p>3</p>
                        人
                    </div>
                    <div>
                        缺卡：
                        <p>3</p>
                        人
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import StaffTag from '../components/StaffTag.vue'
import Calendar from '../components/Calendar.vue'
import BrokenLine from '../components/BrokenLine.vue'
export default {
    name:'Content',
    components:{
        StaffTag,
        Calendar,
        BrokenLine
    },
    data(){
        return{
            lists:[
                {
                    title:'新增员工',
                    img:require('../assets/img/oa17.svg'),
                    color:'rgba(255, 199, 28, 0.2)'
                },
                {
                    title:'打卡记录',
                    img:require('../assets/img/oa18.svg'),
                    color:'rgba(37,97,239,0.2)'
                },
                {
                    title:'审批',
                    img:require('../assets/img/oa19.svg'),
                    color:'rgba(250, 116, 107, 0.2)'
                },
                {
                    title:'社保公积金',
                    img:require('../assets/img/oa20.svg'),
                    color:'rgba(255, 199, 28, 0.2)'
                },
                {
                    title:'候选人',
                    img:require('../assets/img/oa21.svg'),
                    color:'rgba(61, 212, 167, 0.2)'
                },
                {
                    title:'会议室预定',
                    img:require('../assets/img/oa22.svg'),
                    color:'rgba(250, 116, 107, 0.2)'
                },
                {
                    title:'用车记录',
                    img:require('../assets/img/oa23.svg'),
                    color:'rgba(108, 118, 244, 0.2)'
                },
                {
                    title:'工资条',
                    img:require('../assets/img/oa24.svg'),
                    color:'rgba(61, 212, 167, 0.2)'
                },
                {
                    title:'公告',
                    img:require('../assets/img/oa25.svg'),
                    color:'rgba(255, 199, 28, 0.2)'
                },
                {
                    title:'文档库',
                    img:require('../assets/img/oa26.svg'),
                    color:'rgba(37, 97, 239, 0.2)'
                },
                {
                    title:'新闻',
                    img:require('../assets/img/oa27.svg'),
                    color:'rgba(61, 212, 167, 0.2)'
                },
                {
                    title:'资产',
                    img:require('../assets/img/oa28.svg'),
                    color:'rgba(255, 199, 28, 0.2)'
                },
                {
                    title:'绩效',
                    img:require('../assets/img/oa29.svg'),
                    color:'rgba(108, 118, 244, 0.2)'
                }
      
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
    .content{
        margin:60px 0 0 200px;
        padding: 10px 30px 30px;
        min-width: 1210px;
        height: 1180px;
        background-color: rgba(242, 243, 245, 1);
    }
    // 顶部
    .navs{
      font-size: 13px;
      height: 30px;
      line-height: 30px;
    }
    .welcome{
        font-size: 20px;
        display: flex;
        height: 50px;
        line-height: 50px;
        margin: 10px 0;
    }
    // 标题 通用
    .title{
        color: #333333;
        font-size: 16px;
        margin-bottom: 10px;
    }
    .titles{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        p{
            color: #333333;
        font-size: 16px;
        }
        div{
            display: flex;
            align-items: center;
            cursor: pointer;
            p{
                font-size: 12px;
                color: #999;
            }
            img{
                width: 6px;
                height: 10px;
                margin-left: 5px;
            }
        }
    }
    .third-line{
        width: 350px;
        height: 80px;
        display: flex;
        justify-content: space-between;
        text-align: center;
        align-items: center;
        box-sizing: border-box;
        div{
            width: 85px;
        }
        span{
            font-size: 20px;
            font-weight: 700;
        }
        p{
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
   }
   .third-lines{
        width: 350px;
        height: 80px;
        display: flex;
        justify-content: space-between;
        text-align: center;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;
        box-sizing: border-box;
        div{
            width: 75px;
        }
        span{
            font-size: 20px;
            font-weight: 700;
        }
        p{
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
   }
    // 第二部分
    .second-box{
        min-width: 1220px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .entry{
            padding: 15px;
            width: 310px;
            height: 460px;
            background-color: #ffffff;
            border-radius: 8px;
            box-sizing: border-box;
            ul{
                margin-top: 5px;
                display: flex;
                flex-wrap: wrap;
                list-style: none;
                justify-content: space-between;
                li{
                    margin-top: 35px;
                    text-align: center;
                    width: 60px;
                    height: 60px;
                    div{
                        width: 40px;
                        height: 40px;
                        margin: 0 auto;
                        line-height: 46px;
                        border-radius: 8px;
                    }
                    p{
                        margin-top: 5px;
                        font-size: 12px;
                        color: #333333;
                    }
                }
            }
        }

    }
    // 第三部分
    .third-box{
        min-width: 1220px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .third-1st{
            width: 390px;
            height: 310px;
            border-radius: 8px;
            background-color: #ffffff;
            padding: 20px;
            box-sizing: border-box;
        }
        .third-3rd{
            .third-inner{
                    margin-top: 20px;
                    width: 390px;
                    height: 185px;
                    border-radius: 8px;
                    background-color: #ffffff;
                    padding: 20px;
                    box-sizing: border-box;
            }
    }
    }
    .third-in{
        width: 390px;
        height: 155px;
        border-radius: 8px;
        background-color: #ffffff;
        padding: 20px;
        box-sizing: border-box;
        }
    .unit{
        span{
            &:nth-of-type(2){
                font-size: 12px;
                color: #999;
                font-weight: 300;
            }
        }
    }
    .state{
        margin: 15px auto 0;
        width: 300px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #333333;
        div{
            display: flex;
            height: 25px;
            line-height: 25px;
        }
    }
    .bottoms{
        margin-bottom: 15px;
    }
</style>